<template>
  <div class="footerMusic">
    <div class="left" @click="swithDetailShow">
      <img :src="songInfo[songIndex].al.picUrl" alt="" />
      <div class="name">
        <p>{{ songInfo[songIndex].name }}</p>
        <p>横滑可以切换上下首哦</p>
      </div>
    </div>
    <div class="right">
      <svg class="icon" aria-hidden="true" @click="play" v-if="isBtnShow">
        <use xlink:href="#icon-24gl-playSquare"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-24gl-pauseSquare"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-24gf-playlistMusic"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${songInfo[songIndex].id}.mp3`"
    ></audio>
    <van-popup
      v-model:show="detailShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <musicDetail
        :musicList="songInfo[songIndex]"
        :play="play"
        :isBtnShow="isBtnShow"
        :addDuration="addDuration"
    /></van-popup>
  </div>
</template>
<script setup>
import { computed, ref, watch, onUpdated } from 'vue'
import { useStore } from 'vuex'
import musicDetail from '@/components/item/musicDetail'
const store = useStore()
const songInfo = computed(() => store.state.playList)
const songIndex = computed(() => store.state.playListIndex)
const isBtnShow = computed(() => store.state.isBtnShow)
const detailShow = computed(() => store.state.detailShow)
const audio = ref(null)
const interval = ref(0)
const swithDetailShow = () => {
  store.commit('upDatedetailShow')
}
const addDuration = () => {
  store.commit('upDateduration', audio.value.duration)
}
const updateTime = () => {
  interval.value = setInterval(() => {
    store.commit('upDatecurrentTime', audio.value.currentTime)
  }, 1000)
}
const play = () => {
  console.log(audio.value.paused)
  if (audio.value.paused) {
    audio.value.play()
    store.commit('upDateisBtnShow', false)
    updateTime()
  } else {
    audio.value.pause()
    store.commit('upDateisBtnShow', true)
    clearInterval(interval.value)
  }
}
onUpdated(() => {
  const value = songInfo.value[songIndex.value].id
  store.dispatch('getMusicLyric', value)
  addDuration()
  updateTime()
})
watch(songInfo, () => {
  // true是暂停状态
  if (isBtnShow.value) {
    audio.value.play()
    audio.value.autoplay = true
    store.commit('upDateisBtnShow', false)
  }
})
watch(songIndex, () => {
  audio.value.autoplay = true
  // store.commit('upDateisBtnShow', false)
  // // 第一次是true把图标改过来
  console.log(audio.value.paused)
  if (audio.value.paused) {
    // 显示播放状态
    store.commit('upDateisBtnShow', false)
  }
})
</script>
<style lang='scss' scoped>
.footerMusic {
  display: flex;
  position: fixed;
  width: 100%;
  height: 1.2rem;
  bottom: 0;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e1e0e1;
  background: #fff;
  .left {
    display: flex;
    width: 50%;
    justify-content: space-between;
    .name {
      p {
        font-weight: 800;
      }
      p:nth-child(2) {
        font-size: 0.24rem;
        margin-top: 0.1rem;
        color: #bfbebb;
      }
    }
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }
  .right {
    display: flex;
    width: 20%;
    padding: 0.1rem;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
